// 管理首页
import React, { Component } from 'react'
import './Home.scss'
import axios from 'axios'
import echarts from 'echarts/lib/echarts';
// 引入饼状图
import 'echarts/lib/chart/pie';
// 柱状图
import 'echarts/lib/chart/bar';
// 引入条形图
import 'echarts/lib/chart/line';
// 引入提示框和标题
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';

// 引入图表数据
    // 最新入庫商品統計组件
import Statistics from '../compenent/Home/Statistics';
// 商品种类占比
import Sort from '../compenent/Home/Sort';
// 出入庫商品數量
import Amount from '../compenent/Home/Amount';
// 图表
import {RocketIcon} from '@primer/octicons-react';
export default class Home extends Component {
    constructor(props){
        super(props);
        this.state={
            wChart:null,
            pChart:null,
            tChart:null,
            oneInfo:[],
            productInfo:[]
        }
        this.weather = React.createRef();
        this.piechart = React.createRef();
        this.diagram = React.createRef();
    }
    componentDidMount(){
        
        // setTimeout(() => {
            // 引入图表
            this.setState({
                wChart:echarts.init(this.weather.current),
                pChart:echarts.init(this.piechart.current),
                tChart:echarts.init(this.diagram.current)
            })
       
            this.setState(state => {
                // 柱状图
                state.wChart.setOption(Statistics);
                // 饼状图
                state.pChart.setOption(Sort);
                // 折线图
                state.tChart.setOption(Amount);
            })
        // },100);
        
        // 获取远端数据接口
        axios.get(`/store-manage/gw1901/goods-manage-g2/goods-info.php`).then(res =>{
            this.setState({
                productInfo:res.data
            })
            // 获取商品名
            const goodsNameArr =res.data.map((goods)=>goods.goodsName)
            // 获取品牌名
            const brandArr =res.data.map((goods)=>goods.brand)
            // 获取分类
            const categoryArr =res.data.map((goods)=>goods.category)
            // 库存数量
            const quantityArr =res.data.map((goods)=>goods.quantity)
            this.setState({
            //    只显示5   条数据
            goodsNameArr:goodsNameArr.slice(0,5),
            quantityArr,
            categoryArr,
            brandArr
            }) 
            this.setState(state => {
                // 柱状图
                state.wChart.setOption({
                    xAxis:{
                        data:this.state.goodsNameArr
                    },
                    series:[{
                        name:'随便',
                        data:quantityArr
                    }]
                });

                // 饼状图
                state.pChart.setOption({
                    title:{
                        text:'商品种类占比'
                    },
                    legend: {
                        orient: "vertical",
                        left: "right",
                        data: categoryArr
                    },
                    
                    series: [{
                       
                        data: [{
                            value: quantityArr[0],
                            name: goodsNameArr[0]
                          }, {
                            value: quantityArr[1],
                            name: goodsNameArr[1]
                          }, {
                            value: quantityArr[2],
                            name: goodsNameArr[2]
                          }, {
                            value: quantityArr[3],
                            name: goodsNameArr[3]
                          }, {
                            value: quantityArr[4],
                            name: goodsNameArr[4]
                          }]
                        
                    }]
                });

                // 折线图
                state.tChart.setOption({
                    xAxis:{
                        data:this.state.goodsNameArr
                    },
                    series:[{
                        name:'入库',
                        type:'line',
                        data:quantityArr
                    },
                    {
                        name:'出库',
                        type:'line',
                        data:[222,333,444,333,222]
                    }
                
                ]
                });
            });
         })   
        
    }
    render() {
        return (
            <div className="home">
                <h2><RocketIcon size={36} />管理首页</h2>
                <div>
                    <div className="home_top">
                        {/* 最新入庫商品統計 */}
                        <div className="top_lift box_show" ref={this.weather}  datas={this.state.productInfo}></div>
                        {/* 商品種類占比 */}
                        <div className="top_right box_show" ref={this.piechart} datas={this.state.productInfo}></div>
                    </div>
                        {/* 出入庫商品數量 */}
                    <div className="home_bottom box_show " 
                    ref={this.diagram} datas={this.state.productInfo}></div>
                    <div>
                        
                    </div>
                </div>
            </div>
        )
    }
}
